
   // 调用函数 动态渲染生成页面
   setPage();

   // 使用 js的事件委托语法 添加点击事件
   $(".container").click(function (event) {
     // 根据 触发事件的事件对象标签不同 触发执行不同的程序

     // 根据 当前 localStorage 中 存储的 购物车数据
     const Man = JSON.parse(window.localStorage.Man);

     // 点击标签 name 是 all 点击的是全选input标签
     // 给 数组中 所有商品 buy属性 赋值
     // 赋值的数据 是 全选标签 checked属性值
     // 将 新的数组 以json字符串的形式 存储给 localStorage
     // 再次调用函数 动态渲染生成新的页面
     if ($(event.target).attr("name") === "all") {
       // 循环遍历 Man数组 给所有对象中buy属性 赋值
       // 赋值的数据是 全选标签 checked属性值
       Man.forEach((item) => {
         item.buy = $(event.target).prop("checked");
       });

       // 点击标签 name 是 other 点击的是其他input标签
       //  给 点击的标签 对应的 数组中的对象 buy属性 赋值
       // 赋值的属性值 是 其他的input标签 checked的属性值
       // 将 新的数组 以json字符串的形式 存储给 localStorage
       // 再次调用函数 动态渲染生成新的页面
     } else if ($(event.target).attr("name") === "other") {
       // 点击标签 goods_id属性的属性值 就是 这个商品的goods_id
       // 和 数组中对象的goods_id 如果相同
       // 就给 这个数组中的对象 buy 属性赋值
       for (let i = 0; i <= Man.length - 1; i++) {
         // 如果 当前点击标签 存储的 good_id
         // 和 数组中循环对象 goods_id 相同
         // 给 当前这个数组中 循环对象 buy 属性 赋值
         // 赋值的是 点击标签 checked属性值
         if ($(event.target).attr("goods_id") === Man[i].goods_id) {
           Man[i].buy = $(event.target).prop("checked");
           break;
         }
       }

       // 点击标签 name是 - 点击的是 -标签
       // 给 点击的标签 对应的 数组中的对象 num属性 累减1
       // 最小值 不能 小于 1
       // 将 新的数组 以json字符串的形式 存储给 localStorage
       // 再次调用函数 动态渲染生成新的页面
     } else if ($(event.target).attr("name") === "-") {
       // 点击标签 goods_id属性的属性值 就是 这个商品的 goods_id
       // 和 数组中对象的goods_id 如果相同
       // 就给 这个 数值中的对象 buy 属性赋值
       for (let i = 0; i <= Man.length - 1; i++) {
         // 如果 当前点击标签 存储的 good_id
         // 和 数值中循环对象 good_is 相同
         // 给 当前这个数组中 循环对象 num属性 存储数据 累减1
         if ($(event.target).attr("goods_id") === Man[i].goods_id) {
           Man[i].num--;
           break;
         }
       }

       // 点击标签 name 是 + 点击的是 + 标签
       // 给 点击的标签 对应的 数组中的对象 num属性 累加1
       // 最大值 不能 大于 库存
       // 将 新的数组 以json字符串的形式 存储给 localStorage
       // 再次调用函数 动态渲染生成新的页面
     } else if ($(event.target).attr("name") === "+") {
       // 点击标签 goods_id属性的属性值 就是 这个商品的 goods_id
       // 和 数组中对象的goods_id 如果相同
       // 就给 这个 数值中的对象 buy 属性赋值
       for (let i = 0; i <= Man.length - 1; i++) {
         if ($(event.target).attr("goods_id") === Man[i].goods_id) {
           Man[i].num++;
           break;
         }
       }

       // 点击标签 name 是 del 点击的是 删除 标签
       // 给 点击的标签 对应的 数组中的对象 删除
       // 因为没有重复的对象 不需要考虑 数组坍塌
       // 将 新的数组 以json字符串的形式 存储给 localStorage
       // 再次调用函数 动态渲染生成新的页面
     } else if ($(event.target).attr("name") === "del") {
       // 弹出确认框
       if (!window.confirm("您确定要删除吗")) {
         return;
       }

       // 点击标签 goods_is属性的属性值 就是 这个商品的 goods_id
       // 和 数组中对象的goods_id 如果相同
       // 就给 这个 数组中的对象 buy 属性赋值
       for (let i = 0; i <= Man.length - 1; i++) {
         // 如果 当前点击标签 存储的 goods_id
         // 和 数组中循环对象 goods_id 相同
         // 从 数组中删除这个对应的对象
         if ($(event.target).attr("goods_id") === Man[i].goods_id) {
           Man.splice(i, 1);
           break;
         }
       }
     }

     // 将 新数组 以 json字符串形式 设定给 localStorage 中的 购物车键值对
     window.localStorage.Man = JSON.stringify(Man);

     // 再次调用函数 根据 新的 购物车数据 再次动态渲染生成新的页
     setPage();
   });

   // 动态生成页面函数
   function setPage() {
     // 定义变量 存储 计算结果
     let type = 0;
     let number = 0;
     let money = 0;

     // 全选标签 checked 属性
     let flag = true;

     // 判断 有没有 购物车键值对
     if (window.localStorage.Man === undefined) {
       // 还没有创建 购物车键值对 生成 对应的 空页面内容
       $(".container").html(
         "<h1>您还没有购买记录，请您先去添加心爱的商品</h1>"
       );
     } else {
       // 已经创建购物车键值对 需要获取购物车键值对的数据
       // 数据是 json字符串 需要转化为 对应的数据类型
       const Man = JSON.parse(window.localStorage.Man);

       // 如果 是 一个空数组 生成对应的空页面
       if (Man.length === 0) {
         // 购物车是空数组 对应的 空页面
         $(".container").html("<h1>您的商品已经被大冤种清空</h1>");

         // 如果 不是 空数组 根据 购物车数组 动态生成页面
       } else {
         let str = "";

         // li标签 之前的部分 是 固定的内容
         str += `<div class="panel panel-info ">
     <div class="panel-body bg-info">
       <div class="checkbox">
         <label>
           <input name="all" type="checkbox" value="">
           全选
         </label>
       </div>
     </div>
     <div class="panel-footer">
       <ul class="cart-list">`;

         // li标签 是 根据数组动态生成的
         Man.forEach((item, key) => {
           // 如果 item 中 buy 属性 存储的是 ture
           // 累加当前商品的 购买种类购买数量 购买金额
           if (item.buy) {
             // 当前循环商品 如果购买状态是 ture 也就是 要购买状态
             // 累加 购买种类 购买数量 购买金额
             type++;
             number += item.num;
             money += item.num * item.goods_price;
           } else {
             // 当前循环商品 如果购买状态是 false 也就是 不要购买状态
             // 给 全选标签 checked 属性值 赋值 false
             flag = false;
           }

           // 定义标签时 根据 数据库数据 定义 属性属性值
           str += ` <li class="cart-item">
           <div class="left">
             <input name="other" goods_id="${
               item.goods_id
             }" type="checkbox" ${item.buy === true ? "checked" : ""}>
           </div>
           <div class="right">
             <div class="media">
               <div class="media-left">
                 <a href="#">
                   <img class="media-object" src="${
                     item.goods_small_logo
                   }" alt="...">
                 </a>
               </div>
               <div class="media-body">
                 <h4 class="media-heading">${item.goods_name}</h4>
                 <p>
                   <i class="glyphicon glyphicon-yen"></i>
                   <span>${item.goods_price}</span>
                 </p>
                 <div class="btn-group pull-right" role="group" aria-label="...">
                   <button name="-" goods_id="${
                     item.goods_id
                   }" type="button" class="btn btn-default" ${
             item.num === 1 ? "disabled" : ""
           }>-</button>
                   <button type="button" class="btn btn-default" disabled>${
                     item.num
                   }</button>
                   <button name="+" goods_id="${
                     item.goods_id
                   }"  type="button" class="btn btn-default" ${
             item.num === Number(item.goods_number) ? "disabled" : ""
           }>+</button>
                 </div>
                 <button name="del" goods_id="${
                   item.goods_id
                 }" class="del btn btn-danger">我不要了</button>

               </div>
             </div>
           </div>
         </li>`;
         });

         // li标签 之后的部分 是 固定的内容
         str += ` </ul>
     </div>
     
     <div>
       <h1>您一共购买 ${type} 种 商品</h1>
       <h1>您一共购买 ${number} 件 商品</h1>
       <h1>您一共支付 ${money.toFixed(2)} 元 商品</h1>
       
       </div>
     `;

         // 将 字符串 写入 标签中
         $(".container").html(str);
         // 循环结束 将全选标签 checked属性设定
         $('[name="all"]').prop("checked", flag);
       }
     }
   }

/*
  1, 定义一个函数 根据 localStorage 中 购物车数据 动态渲染生成页面

    没有创建 购物车键值对 
      生成 对应的 页面内容1

    创建购物车键值对
      购物车存储的是 空数组
        生成 对应的  页面内容2

      购物车存储的是 不是空数组
        根据 购物车数组数据 动态渲染生成页面

  2,  点击事件
    本质操作过程是:
      1,  用户 操作的是 页面

      2,  获取 操作的数据 或者 操作的效果
          发送请求 修改 数据库 数据

      3,  根据 数据库 响应的数据结果 再次动态渲染生成新的页面内容

    当前 操作的 localStorage 本地存储的数据

*/
